<script setup>
import { ref, reactive, onMounted, onBeforeUnmount,defineExpose } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MyIcon from '@/components/my-icon/index.vue'
import { Plus } from '@element-plus/icons-vue'
import headerBar from '../component/headerBar.vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import posterSet from './posterSet.vue'
import customerSet from './customerSet.vue'
import customerGroupSet from './customerGroupSet.vue'
import editsop from '@/components/app/groupchat.vue'
import { promotionadd,promotioninfo } from '@/api'
const isRefresh=ref(false)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const dialogVisible = ref(false)
const staffData = ref()
const posterRef = ref(null)
const customerSetRef = ref(null)
const customerGroupSetRef = ref(null)
const chooseStaff = () => {
	dialogVisible.value = true
	chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
	console.log(val, '数据回显')
	staffData.value = val
	for(var i = 0;i<val.length;i++){
		ruleForm.staffs.push(val[i].id)
	}
	handleRefresh()
}
const chooseDialogue = ref(null)
const active = ref(0)
const router = useRouter()
const route = useRoute()
const nowTime = ref('')
const timeInterval = ref('')
const ruleFormRef = ref()
const ruleForm = reactive({
	name: '',
	type: 1,
	staffs: [],
	remin_status: 1,
	hours: new Date(2016, 9, 10, 12, 0),
	desc: '您有一个推广任务已经开始，快点击下方链接领取你的专属海报 ，邀请客户添加你的企业微信吧～ ',
	text: '',
	promotion_type: 1,
	end_time: '',
	selectTime: '',
	welcome_type:'',
	welcome_text:'',
	welcome_list:[],
	is_tag:'',
	tags:'',
	is_bz:'',
	bz:'',
	is_describe:'',
	describe:'',
	h5_title:'',
	h5_type:'',
	h5_one_logo:'',
	h5_one_qyname:'',
	h5_one_is_introduce:'',
	h5_one_introduce:'',
	h5_one_guidance:'',
	h5_tow_bg:'',
	h5_tow_style:'',
	group_data:'',
	task_state:''
})
const rules = reactive({
	name: [{ required: true, message: '推广码名称不能为空', trigger: 'blur' }],
	staff: [
		{
			required: true,
			message: '推广成员不能为空'
		}
	],
	type: [
		{
			required: true,
			message: '推广码类型不能为空',
			trigger: 'change'
		}
	],

	desc: [{ required: true, message: '任务说明不能为空', trigger: 'blur' }],
	text: [{ required: true, message: '推广文案不能为空', trigger: 'blur' }]
})
const getNowTime = () => {
	timeInterval.value = setInterval(() => {
		// nowTime.value=new da
		let time = new Date().toLocaleTimeString()
		nowTime.value = time.slice(0, 5)
	}, 2000)
}
onMounted(() => {
	getNowTime()
	if(route.query.id){
		console.log(route.query.id)
		promotioninfo({id:route.query.id}).then(res=>{
			ruleForm.bz=res.data.bz
			ruleForm.describe=res.data.describe
			ruleForm.end_time=res.data.end_time
			ruleForm.h5_one_guidance=res.data.h5_one_guidance
			ruleForm.h5_one_introduce=res.data.h5_one_introduce
			ruleForm.h5_one_is_introduce=res.data.h5_one_is_introduce
			ruleForm.h5_one_logo=res.data.h5_one_logo
			ruleForm.h5_one_qyname=res.data.h5_one_qyname
			ruleForm.h5_title=res.data.h5_title
			ruleForm.h5_tow_bg=res.data.h5_tow_bg
			ruleForm.h5_tow_style=res.data.h5_tow_style
			ruleForm.h5_type=res.data.h5_type
			ruleForm.is_bz=res.data.is_bz
			ruleForm.is_describe=res.data.is_describe
			ruleForm.is_tag=res.data.is_tag
			ruleForm.name=res.data.name
			ruleForm.promotion_type=res.data.promotion_type
			ruleForm.promotion_welcome=res.data.promotion_welcome
			ruleForm.remin_status=res.data.remin_status
			staffData.value=res.data.staffs
			for(var i =0;i<staffData.value.length;i++){
				ruleForm.staffs.push(staffData.value[i].id)
			}
			ruleForm.tags=res.data.tags
			ruleForm.task_state=res.data.task_state
			ruleForm.ttime=res.data.ttime
			ruleForm.welcome_text=res.data.welcome_text
			console.log(ruleForm)
		})
	}
})
onBeforeUnmount(() => {
	clearInterval(timeInterval.value)
})
const timeclick = (time) => {
	console.log(time)
}
const nextStep = (type) => {
	if (type === 'next') {
		if (active.value < 2) {
			active.value += 1
			if(active.value == 1){
				customerSetRef.value.show(ruleForm)
			}
			if(active.value == 2){
				console.log(customerSetRef.value.shows())
				var data = customerSetRef.value.shows()
				ruleForm.welcome_type=data.welcome_type
				ruleForm.welcome_text=data.welcome_text
				ruleForm.welcome_list=data.welcome_data
				ruleForm.is_tag=data.is_tag
				ruleForm.tags=data.tags
				ruleForm.is_bz=data.is_bz
				ruleForm.bz=data.bz
				ruleForm.is_describe=data.is_describe
				ruleForm.describe=data.describe
				console.log(ruleForm)
				const customerGroupSetRefdata= customerGroupSetRef.value.shows()
				ruleForm.group_welcome=customerGroupSetRefdata.group_welcome
				ruleForm.group_data=customerGroupSetRefdata.group_data
			}
		} else {
			console.log(posterRef.value.shows())
			var datas = posterRef.value.shows()
			ruleForm.h5_title=datas.h5_title
			ruleForm.h5_type=datas.h5_type
			ruleForm.h5_one_logo=datas.h5_one_logo
			ruleForm.h5_one_qyname=datas.h5_one_qyname
			ruleForm.h5_one_is_introduce=datas.h5_one_is_introduce
			ruleForm.h5_one_introduce=datas.h5_one_introduce
			ruleForm.h5_one_guidance=datas.h5_one_guidance
			ruleForm.h5_tow_bg=datas.h5_tow_bg
			ruleForm.h5_tow_style=datas.h5_tow_style
			ruleForm.group_data=datas.group_data
			ruleForm.group_welcome=datas.group_welcome
			console.log(ruleForm)
			if(route.query.id){
				ruleForm.id=route.query.id
				promotionadd(ruleForm).then(res=>{
				ElMessage({
				message: res.msg,
				type: 'success',
			})
				router.push('/app/wework/promote')
			})
			}else{
				promotionadd(ruleForm).then(res=>{
				ElMessage({
				message: res.msg,
				type: 'success',
			})
				router.push('/app/wework/promote')
			})
			}
			
			// router.push('/')
		}
	} else {
		if (active.value > 0) {
			active.value -= 1
		}
	}
}
const handleClose=(index)=>{
	console.log(index)
	staffData.value.splice(index,1)
	ruleForm.staffs.splice(index,1)
}
const edit =ref()
const getDialogueData = ()=>{
	console.log(111)
	var data = {
		show: true,
		// id: val,
		// name: val.name
		quantity:1
	}
	edit.value.addapi(data)
}
const groupchatapi = (val)=>{
	console.log(val)
	customerGroupSetRef.value.tablevalue(val)
}
</script>
<template>
	<headerBar :title="'创建推广码'" />
	<div class="container">
		<div class="container-left">
			<div class="step-box">
				<el-steps direction="vertical" :active="active" finish-status="success">
					<el-step title="基础设置" />
					<el-step :title="ruleForm.type === 1 ? '客户设置' : '客户群设置'" />
					<el-step title="海报设置" />
				</el-steps>
			</div>
			<div class="step-btn">
				<el-button class="step-next" @click="nextStep('prev')" v-show="active > 0">上一步</el-button>
				<el-button class="step-next" @click="nextStep('next')" type="primary">{{
					active === 2 ? '开始推广' : '下一步'
				}}</el-button>
			</div>
		</div>
		<div class="container-right">
			<el-scrollbar max-height="100%">
				<div class="code-warp" v-show="active === 0">
					<div class="preview-wrap">
						<img
							class="preview-phone"
							src="https://assets.weibanzhushou.com/web/we-work-webapp/phonePreview.ef61390b8fe4.jpg"
							alt=""
						/>
						<p class="preview-title pos-center">提醒</p>
						<p class="date pos-center">{{ nowTime }}</p>
						<div class="task-remin_status pos-center">
							<div class="launch">
								<img
									src="https://assets.weibanzhushou.com/web/we-work-webapp/promote-qr_corp-logo.229971336f88.png"
									class="avatar"
								/>
							</div>
							<div class="text-content">
								<p class="flex-row" style="position: relative; margin-bottom: 8px">
									<span class="remin_status-title" style="min-width: 80px">【任务提醒】</span>
									<span class="gray-font" style="right: -6px">您有新的任务哦！</span>
								</p>
								<div class="small-content">
									<p class="content">任务类型：推广任务</p>
									<p class="content">
										任务内容：<span style="color: #2da447">{{
											ruleForm.type === 1 ? '添加企业微信' : '邀请客户入群'
										}}</span>
									</p>
									<p class="content">
										<span>任务说明：</span>
										<span>{{ ruleForm.desc }} </span>
									</p>
								</div>
								<p class="remin_status-tip">点击领取专属海报</p>
							</div>
						</div>
					</div>
					<el-form
						ref="ruleFormRef"
						:model="ruleForm"
						:rules="rules"
						label-width="140px"
						class="demo-ruleForm"
						status-icon
					>
						<el-form-item label="推广码类型：" prop="type">
							<el-radio-group v-model="ruleForm.type">
								<el-radio :label="1">添加成员</el-radio>
								<el-radio :label="2">加入客户群</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="推广码名称：" prop="name">
							<el-input
								style="width: 328px; height: 36px"
								show-word-limit
								maxlength="16"
								v-model="ruleForm.name"
								placeholder="推广码名称仅内部可见"
							/>
						</el-form-item>
						<el-form-item prop="staff">
							<template #label>
								<div class="align-side">
									推广成员
									<el-tooltip effect="light" placement="top-start">
										<template #content>
											<p style="font-size: 14px">将给选择的成员生成专属分享海报客户扫码即可添加成员</p>
										</template>
										<MyIcon class="question-icon" name="Question" />
									</el-tooltip>

									：
								</div>
							</template>
							<el-button @click="chooseStaff" style="height: 36px; border-radius: 1px" :icon="Plus">添加成员</el-button>
							
						</el-form-item>
						<el-form-item>
							<div>
								<el-tag class="mx-1" size="large" style="margin-left: 4px;" closable v-for="(item,index) in staffData" @close="handleClose(index)">{{item.name}}</el-tag>
							</div>
						</el-form-item>
						<el-form-item style="margin-bottom: 0" label="每日提醒：" prop="remin_status">
							<el-switch style="margin-right: 10px" v-model="ruleForm.remin_status" :active-value="1"
      :inactive-value="0" />
							{{ ruleForm.remin_status==1 ? '提醒' : '不提醒' }}
						</el-form-item>
						<el-form-item style="margin-bottom: 0px">
							<p class="ame-switch">
								开启后，每日定时汇总员工推广数据并通过「提醒」提醒员工
								<el-tooltip effect="light" placement="bottom">
									<template #content>
										<img style="width: 450px" src="@/assets/img/img/promote-qr_day-tip.999ac303af02.png" alt="" />
									</template>
									<span class="btn-text">查看示例</span>
								</el-tooltip>
							</p>
						</el-form-item>
						<el-form-item style="margin-top: 0px" prop="ttime">
							<div class="align-center time-tips">
								每天<el-time-picker
									style="display: flex; align-items: center; width: 128px; height: 36px; margin: 0 5px"
									v-model="ruleForm.ttime"
									placeholder="请选择时间"
								/>汇总推广数据，提醒员工
							</div>
						</el-form-item>
						<el-form-item prop="desc">
							<template #label>
								<div class="align-side">
									任务说明
									<el-tooltip effect="light" placement="top-start">
										<template #content>
											<p style="font-size: 14px">将通过「提醒」发布员工任务说明</p>
										</template>
										<MyIcon class="question-icon" name="Question" />
									</el-tooltip>

									：
								</div>
							</template>
							<el-input
								v-model="ruleForm.task_state"
								style="width: 458px"
								:autosize="{
									minRows: 8
								}"
								maxlength="200"
								placeholder="请输入任务说明"
								show-word-limit
								type="textarea"
								resize="none"
							/>
						</el-form-item>
						<el-form-item style="margin-bottom: 0px" prop="promotion_welcome">
							<template #label>
								<div class="align-side">
									推广文案
									<el-tooltip effect="light" placement="top-start">
										<template #content>
											<p style="font-size: 14px">企业推广活动文案，员工可复制运营客户</p>
										</template>
										<MyIcon class="question-icon" name="Question" />
									</el-tooltip>

									：
								</div>
							</template>
							<el-input
								v-model="ruleForm.promotion_welcome"
								style="width: 458px"
								:autosize="{
									minRows: 8
								}"
								maxlength="200"
								placeholder="请输入推广文案"
								show-word-limit
								type="textarea"
								resize="none"
							/>
						</el-form-item>
						<el-form-item style="margin-top: 8px">
							<el-tooltip effect="light" placement="bottom">
								<template #content>
									<img style="width: 450px" src="@/assets/img/img/promote-qr_day-tip.999ac303af02.png" alt="" />
								</template>
								<span class="btn-text">查看示例</span>
							</el-tooltip>
						</el-form-item>
						<el-form-item label="推广码失效时间">
							<el-radio-group v-model="ruleForm.promotion_type">
								<el-radio :label="1">永久有效</el-radio>
								<el-radio :label="2">自定义截止时间</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item v-if="ruleForm.promotion_type == 2">
							<!-- <el-date-picker
								v-model="ruleForm.end_time"
								value-format="YYYY-MM-DD"
								format="YYYY-MM-DD"
								type="date"
								placeholder="选择日期"
							/>
							<el-time-picker
								value-format="HH:mm:ss"
								format="HH:mm:ss"
								v-model="ruleForm.selectTime"
								placeholder="请输入时间"
								@change="timeclick(ruleForm.selectTime)"
							/> -->
							<el-date-picker
									v-model="ruleForm.end_time"
									type="datetime"
									placeholder="Select date and time"
								/>
						</el-form-item>
					</el-form>
				</div>
				<div v-show="active === 1">
					<customerSet v-show="ruleForm.type === 1" ref="customerSetRef" />
					<customerGroupSet @getDialogueData="getDialogueData($event, val)" v-show="ruleForm.type === 2" ref="customerGroupSetRef" />
				</div>
				
				<div v-show="active === 2">
					<posterSet ref="posterRef" />
				</div>
				<ChooseDialogue
					:dialogVisible="dialogVisible"
					@getChooseData="getChooseData($event, val)"
					ref="chooseDialogue"
				/>
			</el-scrollbar>
		</div>
		<editsop ref="edit" :groupchatapi="groupchatapi" />
	</div>
</template>

<style lang="scss" scoped>
.flex-row {
	-webkit-box-pack: start;
	-webkit-box-align: center;
	align-items: center;
	display: -webkit-box;
	display: flex;
	justify-content: flex-start;
	padding: 0;
}
.btn-text {
	color: #1890ff;
	cursor: pointer;
}
.time-tips {
	font-size: 14px;
	color: #000000a6;
}
.question-icon {
	margin: 0 3px;
	cursor: pointer;
}
.align-center {
	display: flex;
	align-items: center;
}
.justify-center {
	align-items: center;
}
.container {
	display: flex;
	justify-content: space-between;
	-webkit-box-flex: 1;
	flex: 1;
	width: 100%;
	padding: 16px;
	.container-left,
	.container-right {
		max-height: calc(100vh - 140px);

		background-color: #fff;
	}
	.container-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 14%;
		padding-top: 24px;
		:deep(.el-step.is-vertical .el-step__line) {
			width: 1px;
			top: 30px;
			bottom: 9px;
			left: 11px;
		}
		:deep(.el-step__icon) {
			width: 20px;
			height: 20px;
			font-size: 12px;
		}
		:deep(.el-step__title.is-process) {
			font-weight: 500;
			color: #a8abb2;
		}
		:deep(.el-step__head.is-process) {
			color: #fff;
			border-color: #1890ff;
		}
		:deep(.el-step__head.is-process .el-step__icon) {
			background-color: #1890ff;
		}
		:deep(.el-step__line-inner) {
			display: none;
		}
		:deep(.el-step__head.is-wait .el-step__icon) {
			border-color: #ccd5de;
			background: #ccd5de;
		}
		:deep(.el-step__head.is-success) {
			color: #1890ff;
			border-color: #1890ff;
		}
		:deep(.el-step__title.is-success) {
			color: #1890ff;
		}
		:deep(.el-step__head.is-wait) {
			color: #fff;
		}
		.menu {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			// height: 168px;
			color: #000000a6;
			.active {
				position: relative;
				background: #effaff;
				font-size: 14px;
				font-weight: 600;
				color: #1890ff;
			}
			.active::before {
				content: ' ';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 4px;
				background: #1890ff;
			}
			.menu-title {
				width: 100%;
				height: 36px;
				line-height: 36px;
				font-size: 14px;
				margin-bottom: 20px;
				text-align: center;
				cursor: pointer;
			}
			.menu-title:first-child {
				margin-top: -5px;
			}
		}
		.step-box {
			height: 150px;
		}
		.step-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 24px;
		}
		.step-next {
			width: 92px;
			height: 36px;
			border-radius: 2px;
			margin: 0;
			margin-top: 12px;
			// background-color: #1890ff;
		}
	}
	.container-right {
		width: 85%;
		padding: 24px 24px 0 24px;
		:deep(.el-textarea__inner) {
			background-color: #fbfbfb;
			box-shadow: 0px 0px 0px;
			padding: 5px 16px;
		}
		.code-warp {
			position: relative;
			.preview-wrap {
				position: absolute;
				top: 46px;
				left: 620px;
				width: 274px;
				.preview-phone {
					position: absolute;
					top: 0;
					left: 0;
					width: 274px;
				}
				.preview-title {
					top: 71px;
					font-size: 11px;
					color: #000;
				}
				.pos-center {
					position: absolute;
					left: 50%;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
				}
				.task-remin_status {
					width: 100%;
					padding: 0 30px;
					top: 131px;
					display: flex;
					.avatar {
						width: 26px;
						height: 26px;
						margin-right: 8px;
					}
					.text-content {
						background: #fff;
						width: 176px;
						padding: 5px 10px;
						border-radius: 4px;
						position: relative;
						.remin_status-title {
							color: #000;
							font-weight: 500;
							margin-left: -8px;
							max-width: 160px;
							margin-bottom: 4px;
							font-size: 13px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							word-break: break-all;
						}
						.gray-font {
							display: inline-block;
							font-size: 12px;
							color: rgba(0, 0, 0, 0.65);
							-webkit-transform: scale(0.9);
							transform: scale(0.9);
							position: absolute;
						}
						.remin_status-tip {
							margin-top: 12px;
							color: #1890ff;
							font-size: 12px;
							-webkit-transform: scale(0.9);
							transform: scale(0.9);
						}
						.small-content {
							position: relative;
							color: rgba(0, 0, 0, 0.65);
							.content {
								font-size: 12px;
								margin-bottom: 8px;
								-webkit-transform-origin: top;
								transform-origin: top;
								-webkit-transform: scale(0.9);
								transform: scale(0.9);
							}
						}
						.small-content:before {
							position: absolute;
							display: inline-block;
							content: '';
							height: 100%;
							width: 1px;
							background-color: #1890ff;
							border-radius: 100%;
						}
					}
					.text-content:before {
						content: '';
						position: absolute;
						background-color: #fff;
						width: 8px;
						height: 8px;
						left: -2px;
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
						top: 9px;
					}
				}
				.date {
					top: 111px;
					font-size: 12px;
					color: #999;
				}
			}
		}
		.ame-switch {
			font-size: 13px;
			color: #8c8c8c;
		}
	}
}
</style>
